Container Queries
親コンテナのサイズに対して条件分岐して要素のstyleを指定できる
@mediaはviewportサイズに対して指定するが、それの親コンテナ版 この図がわかりやすい
https://gyazo.com/bcb13460dc9d1b83d6f748ae4a06746d https://jtk.hatenablog.com/entry/2022/09/22/000000
2つの異なるコンテナを定義し、その中で同一の「コンポーネントA」を使用している
コンテナのサイズによって、コンポーネントAのサイズが変わっているのがわかる
どちらも同じviewport sizeなので。
参考
図がわかりやすい
解決する問題の例など
@mediaで指定していると、タブレットでそのstyleを見せることができない場合がある
まあ、できることはわかるmrsekut.icon
そもそも条件分岐を書きたくないという気持ちはある
でもまあコーナーケースでは必要になると思う
その際はmediaqueryより便利だと思う
そもそも使うモチベが低いので調べるのを中断したmrsekut.icon*2
必要になったらまた調べる
入門、ユースケース
2つの登場人物
container側
code:css
/* コンテナの定義 */
main, .sidebar {
container: inline-size;
}
item側
@mediaのノリで使う
code:css
.card {
display: grid;
grid-template:
" image " auto
"content" auto
/ 100% ;
}
@container (width > 400px) {
.card {
grid-template:
"image content" auto
/ auto 1fr ;
}
}
react等ではあまり必要に鳴らなそう？
「親が子のスタイルを決定する」という感じがやりやすい
記述したスタイルよっては、コンテナ要素とコンテナ内の要素が相互に参照しあうおそれもあります。これを回避するため、コンテナを定義した要素にはスタイルの封じ込め（containment）が行われます。封じ込めは、定義した要素の外に影響を及ぼさないと宣言することで、ブラウザにレンダリングの最適化余地を与える機能です。